
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平导航栏</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #num{
            height: 35px;
            border-radius: 10px;
            border-color: aqua;
            margin-top: 15px;
            background-color: greenyellow;
        }
        #btn{
            background-color: green;
            width: 100px;
            height: 37px;
            color: white;
            border-radius: 5px;
            border: 0;
            margin-left: -5px;
        }
        img{
            width: 70px;
            height: 70px;
            /* border-radius: 50%; */
            float: left;
            background-color: lightseagreen;
        }
        /* 1. 去除所有的li的默认的样式 */
        #outer li{
            list-style: none;
        }
        /* 2. 去除a默认的样式 */
        #outer a{
            text-decoration: none;
            color: #222;
        }

        /* 3. 去除ul的padding */
        #outer ul{
            padding: 0;
        }

        /* 4. 让所有的第一层li全部浮动 - 并排显示 */
        /* #outer>li{
            float: left;
        } */
        #outer>li{
            float: left;
        } 

        #outer>li a{
            /* 让内联元素以块元素的方式进行展示 */
            display: block; 
            background-color: rgb(83, 80, 238);
            width: 80px;
            height: 20px;
            /* border: 1px solid #999; */
            padding: 25px;
        }
        #outer ul{
            /* 隐藏 */
            display:none;
        }

        #outer a:hover{
            /* background-color: red; */
            color: gold;
        }

        /* 二级菜单的展示 */
        /* #outer>li:hover ul{
            display: block;
        } */
    </style>
</head>
<body>
    <div>
        <img src="../zuoyeya/logo-mi2.png" alt="">
        <ul id="outer">
            <!-- <li><a> </a>
            </li>
            <li><a> </a>
            </li>
            <li><a> </a>
            </li>
            <li><a> </a>
            </li> -->
            <li><a href="#">Xiaomi</a>
            </li>
            <li><a href="#">Redmi</a>
               
            </li>
            <li><a href="#">电视</a>
               
            </li>
            <li><a href="#">笔记本</a>
                
            </li>
            <li><a href="#">平板</a>
                
            </li>
            <li><a href="#">家电</a>
                
            </li>
            <li><a href="#">路由器</a>
               
            </li>
            <li><a href="#">服务</a>
               
            </li>
            <li><a href="#">社区</a>
            </li>
            <li>
                <div id="outer">
                <input type="text" id="num" placeholder="" value="耳机">
                <button type="button" id="btn" onclick="test()">搜索</button>
            </div>
            </li>
            
        </ul>
        
    </div>
</body>
</html>